import './index.scss'

import { useState, lazy, useEffect } from 'react';
import { useMount, useFavicon, useUpdateEffect } from 'ahooks';

import { Skeleton, Result } from 'antd'
import { useLocation, useNavigate } from 'react-router-dom'

import { Http } from '../Utils/Api'
import { useRequest } from 'alova/client'
import StartTopConfig from '../Page/Other/StartTopConfig'
import { GetIndexedDB, Decrypt } from '../Utils/IndexedDB'
import StartBackConfig from '../Page/Other/StartBackConfig'


import { ModelBox, DrawerBox } from '../Model'


const StartInit = () => {
    const Navigate = useNavigate()
    useFavicon(sessionStorage.getItem('IMAGE') + 'Ico.ico')

    const { pathname } = useLocation()
    const [loading, setLoading] = useState(false)
    const [Status, setStatus] = useState(false)
    const [Config, setConfig] = useState()
    const [PageStatus, setPageStatus] = useState('home')

    const [Home, setHome] = useState()
    const [Page, setPage] = useState()
    const [Nav, setNav] = useState()

    const [scrollStyle, setScrollStyle] = useState()
    const [smallWindow, setSmallWindow] = useState()
    const [routerConfig, setRouterConfig] = useState()


    const { send } = useRequest(data => Http(data), { immediate: false })

    useMount(async () => {
        const { client_Id, tableName } = await GetIndexedDB('config')
        document.title = tableName
        const NAV = lazy(() => import(`./${client_Id}/Nav.jsx`))
        const HOME = lazy(() => import(`./${client_Id}/Home.jsx`))
        const PAGE = lazy(() => import(`./${client_Id}/Page.jsx`))

        setNav(NAV)
        setHome(HOME)
        setPage(PAGE)
        // TODO 获取项目配置
        send({ method: 'get', url: 'dictionary/GetJsonInfoByUuid', params: { uuid: 'StartConfig/index' } }).then(async res => {
            const data = await Decrypt(res)
            const homeState = data.routerConfig.filter(v => v.router_path === 'Home' && v.router_status)
            if (homeState.length === 0) {
                const [{ children }] = data.routerConfig.filter(v => v.router_path !== 'Home')
                Navigate(`/Start/${children[0].router_path}`)
            }
            setConfig(data)
            setRouterConfig(data.routerConfig)
            setSmallWindow(data.smallWindow)
            setScrollStyle({
                '--width': data.scrollConfig.scroll_width + 'px',
                '--height': data.scrollConfig.scroll_height + 'px',
                '--radius': data.scrollConfig.scroll_radius + 'px',
                '--track': data.scrollConfig.scroll_track,
                '--thumb': data.scrollConfig.scroll_thumb,
                '--hover': data.scrollConfig.scroll_hover,
            })
            setStatus(true)
            setLoading(true)
        }).catch(err => setLoading(true))
    })

    useEffect(() => setPageStatus(pathname === '/Start' ? 'home' : 'page'), [pathname])

    return (
        <div className='StartInit'>
            {loading ? Status ?
                <div className='StartPage' style={scrollStyle}>
                    <StartBackConfig config={Config.backConfig} />
                    <StartTopConfig PageStatus={PageStatus} topConfig={Config.topConfig} >
                        <Nav smallWindow={smallWindow} routerConfig={routerConfig} />
                    </StartTopConfig>
                    {Config.navConfig.temp_nav && <Nav smallWindow={smallWindow} routerConfig={routerConfig} />}
                    <div className='StartContent'>
                        {pathname === '/Start' ?
                            <Home smallWindow={smallWindow} routerConfig={routerConfig} /> :
                            <Page smallWindow={smallWindow} routerConfig={routerConfig} />
                        }
                    </div>
                </div> :
                <Result status="404" title="为获取到项目配置,请检测网络或联系管理员!" /> :
                <Skeleton active paragraph={{ rows: 24 }} />
            }
            <ModelBox />
            <DrawerBox />
        </div>
    );
};

export default StartInit;